<script setup>
import { ref, onMounted } from "vue";
import { Menu } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
const router = useRouter();

import { useUserStore } from "@/stores/UserStore";
const useuserstore = useUserStore();
// 路由数据（实际项目中可能从接口或store获取）
const routeList = useuserstore.MenuRouer;

// 点击侧边栏触发
const handleMenuClick = (route) => {
  // 存储当前路由路径
  useuserstore.routePath = route.path;

  // console.log(useuserstore.routePath);
};
</script>

<!-- <template>
  <el-menu
    background-color="#304156"
    text-color="#fff"
    active-text-color="#ffd04b"
    style="width: 230px; height: 100vh"
  >
    <el-menu-item index="1">
      <el-icon><Menu /></el-icon>
      <span>首页</span>
    </el-menu-item>
  </el-menu>
</template> -->

<template>
  <!-- 纵向菜单 -->
  <el-menu
    background-color="#304156"
    text-color="#fff"
    active-text-color="#ffd04b"
    style="width: 230px; height: 93vh"
    router
  >
    <!-- router启用菜单的路由模式 -->
    <!-- 遍历路由数据生成菜单项 -->
    <el-menu-item
      v-for="item in routeList"
      :key="item.id"
      :index="item.path"
      @click="handleMenuClick(item)"
      :style="{ color: item.path === useuserstore.routePath ? '#FFA500' : '' }"
    >
      <!-- 路由路径作为索引，用于跳转 -->
      <el-icon><Menu /></el-icon>
      <span>{{ item.name }}</span>
      <!-- 使用name属性渲染菜单文本 -->
    </el-menu-item>
  </el-menu>
</template>

<style scoped></style>
